CSS Layout - float and clear


« Previous Next »

The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float Property

Example - float: right;

The following example specifies that an image should float to the right in a text:


Example

     <!DOCTYPE html>
     <html>
     <head>
     <style>
       img {
          float: right;
          }
        </style>
        </head>
        <body>
            
        <h2>Float Right</h2>
            
        <p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
            
        <p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
        ACADEMY OF INFORMATION
                TECHNOLOGY
            INNOVATION IN EDUCATION
                    
            We are in training since 20+ years in Computer
            Programming & Hardware Networking
                    
            Microsoft .NET, Android development, C,
            C++ MS SQL SERVER & CISCO'</p>
            
            </body>
            </html>
Result:
Example Image